<style>
	.content {
		border: 1px solid#999;
		border-radius: 16px;
		margin-bottom: 20px;
		padding: 10px;
	}

	.listItem1 {
		flex: 1;
		margin: 10px;
		background: #fff;
		padding: 10px;
		border-radius: 16px;
		text-align: center;
	}

	.listItem1 div {
		text-align: center;
	}

	.listTitle {
		background-image: linear-gradient(to right, #3a3ef4, #3a3ef4);
		color: #fff;
		border-radius: 40px;
		padding: 6px 10px;
		margin: 10px 0;
	}
</style>
<template>
	<div>
		<div class="displayFlexBet bgfff pad10" style="margin-bottom: 10px;border-radius:8px">

			<div class="displayFlexBet">
				<el-select v-model="form.areaId" collapse-tags style="width: 100%;" placeholder="监控区域" filterable @change="getDataList" clearable>
					<el-option v-for="item2 in areaList" :key="item2.id" :label="item2.areaName" :value="item2.id">
					</el-option>
				</el-select>
			</div>

			<el-button @click="visible1 = true,form=$options.data().form" icon="el-icon-plus" type="primary"
				size="mini">新增视频监控对象</el-button>
		</div>

		<div class="displayFlexBet pad10 bgfff color555" style="border-radius:8px">
			<div style="flex:1">监控对象名称</div>
			<div style="flex:1">区域名称</div>
			<div style="flex:1" class="">状态</div>
			<div style="width: 80px;" class="">操作</div>
		</div>

		<div class="bgfff mt10" style="border-radius:8px">
			<el-empty v-if="dataList.length == 0" />
			<div class="displayFlexBet pad10 color555 point" v-for="(item,index) in dataList" :key="index"
				style="border-bottom:1px solid#F8F7F9" @click="gotoDetail(item)">
				<div style="flex:1">{{item.targetName}}</div>
				<div style="flex:1">{{item.areaName}}</div>
				<div style="flex:1" class="">
					<div v-if="item.busiStatus == 'IN_USE'" class="displayFlexBet pad10"
						style="width: 80px;height: 28px;background: #E6F7E9;border-radius: 14px">
						<div style="width: 13px;height: 13px;background: #4CD964;border-radius: 50%;"></div>
						<div class="color000" style="font-weight:500">使用中</div>
					</div>
					<div v-else class="displayFlexBet pad10"
						style="width: 80px;height: 28px;background: #FAE6E6;border-radius: 14px">
						<div style="width: 13px;height: 13px;background: #EF5350;border-radius: 50%;"></div>
						<div class="color000" style="font-weight:500">停用</div>
					</div>
				</div>
				<div style="width: 80px;display: flex;align-items: center;">

					<img src="@/assets/sIcon68.png" style="cursor: pointer;width: 15px;height: 18px;"
						@click.stop="edit(item)" />

					<img v-if="item.busiStatus !='NOT_USE'" src="@/assets/sIcon82.png"
						style="cursor: pointer;width: 18px;height: 18px;" class="ml15"
						@click.stop="updateBusiStatus(item)">
					</img>
					<div v-else
						style="background: #FAE6E6;padding: 4px 10px;color:#EF5350;margin-left: 15px;border-radius: 20px;"
						class="font12 point" @click.stop="updateBusiStatus(item)">重启</div>
				</div>

			</div>
		</div>

		<!--新增基础信息-->
		<el-dialog title="视频监测对象" :visible.sync="visible1" width="40%" top="2%">
			<el-form ref="form" :model="form" label-width="120px" :rules="formRules">
				<el-form-item label="监控对象名称" prop="targetName">
					<el-input v-model="form.targetName" placeholder="监控对象名称" style="width: 100%;"></el-input>
				</el-form-item>

				<el-form-item label="监控区域" prop="areaId">
					<div class="displayFlexBet">
						<el-select v-model="form.areaId" collapse-tags style="width: 100%;" placeholder="监控区域"
							filterable>
							<el-option v-for="item2 in areaList" :key="item2.id" :label="item2.areaName"
								:value="item2.id">
							</el-option>
						</el-select>
					</div>
				</el-form-item>
			</el-form>

			<div style="text-align: center;margin-top: 30px;" slot="footer">
				<el-button type="primary" @click="onSubmit">保存</el-button>
				<el-button @click="visible1 = false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import flvjs from 'flv.js';
	let that
	export default {
		components: {

		},
		data() {
			return {
				params: {},
				form: {
					targetName: '',
					areaId: '',
				},
				formRules: {
					targetName: [{
						required: true,
						message: '请输入监控对象名称',
						trigger: 'blur',
					}],
					areaId: [{
						required: true,
						message: '请选择监控区域',
						trigger: 'change',
					}],
				},
				visible1: false,
				dialogVisible: false,
				dialogVisible2: false,
				dataList: [],
				outletList: [],
				videoUrl: '',
				flvPlayer: null,
				areaList: [],
			}
		},

		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.getGoingAreaList()
		},
		methods: {


			edit(item) {
				that.form = JSON.parse(JSON.stringify(item))
				that.visible1 = true
			},

			getGoingAreaList() {
				that.ajax({
					url: '/areaBaseMng/getGoingAreaList?ticketId=' + that.params.ticketId,
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.areaList = result.data
							//if (!that.form.areaId) that.form.areaId = that.areaList[0].id
							that.getDataList()
						}
					},
				})
			},

			updateBusiStatus(item) {
				let noticeText = "是否停用此视频监控对象"
				if (item.busiStatus == 'NOT_USE') noticeText = "是否启用此视频监控对象"
				this.$alert(noticeText, '', {
					confirmButtonText: '确定',
					callback: action => {
						if (action == "confirm") {
							that.ajax({
								url: '/video/monitor/target/updateBusiStatus?ticketId=' + that
									.params.ticketId,
								data: {
									ticketId: that.params.ticketId,
									monitorId: item.id
								},
								contentType: 'application/x-www-form-urlencoded',
								success: function(result) {
									if (result.data) {
										if (item.busiStatus == 'NOT_USE') item.busiStatus =
											"IN_USE"
										else item.busiStatus = "NOT_USE"
									}
								},
							})
						}
					}
				});
			},

			onSubmit() {
				that.$refs.form.validate((valid) => {
					if (valid) {
						that.ajax({
							url: '/video/monitor/target/save?ticketId=' + that.params.ticketId,
							data: JSON.stringify(that.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.$message.success("保存成功！")
									that.form = {}
									that.visible1 = false
									that.getDataList()
								}
							},
						})
					}
				})
			},

			getDataList() {
				that.ajax({
					url: '/video/monitor/target/pageTarget?ticketId=' + that.params.ticketId +
						"&pageIndex=1&pageSize=99999",
					data: JSON.stringify({
						ticketId: that.params.ticketId,
						areaId: that.form.areaId
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data.records
						}
					},
				})
			},


		}
	}
</script>


<style scoped>
	.display_Flex_Bet {
		display: flex;
		justify-content: space-between;
	}
</style>